<template>
	<view class="container">
		<!-- 表单内容 -->
		<view class="form-container">

			<!-- 样本号输入 -->
			<view class="form-item">
				<text class="label">样本号</text>
				<input class="input" type="text" v-model="formData.sample" placeholder="请输入您的样本号"
					placeholder-style="color:#cccccc" />
				<view class="underline"></view>
			</view>

			<!-- 姓名输入 -->
			<view class="form-item">
				<text class="label">姓名</text>
				<input class="input" type="text" v-model="formData.name" placeholder="请填写真实姓名"
					placeholder-style="color:#cccccc" />
				<view class="underline"></view>
			</view>

			<!-- 年龄输入 -->
			<view class="form-item">
				<text class="label">年龄</text>
				<input class="input" type="number" v-model="formData.age" placeholder="请填写您的年龄"
					placeholder-style="color:#cccccc" />
				<view class="underline"></view>
			</view>

			<!-- 手机号输入 -->
			<view class="form-item">
				<text class="label">手机号</text>
				<input class="input" type="number" v-model="formData.phone" placeholder="请填写您的手机号"
					placeholder-style="color:#cccccc" maxlength="11" />
				<view class="underline"></view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-btn" @click="handleSubmit">
			<view class="container-but">
				<view class="image-btn-container">
					<image class="image-btn"
						src="https://sp.x-fmt.com//uploads/attach/2025/08/20250805/4aff07711eba4d4bb83960969f4fa12c.png"
						mode="widthFix" />
				</view>
			</view>
		</view>

		<!-- 底部提示 -->
		<view class="footer-tip">
			<image class="tip-icon"
				src="https://sp.x-fmt.com//uploads/attach/2025/08/20250805/df661e7773b427d27fd1bfacf9267b17.png"
				mode="aspectFit"></image>
			<text class="tip-text">关注客服，出报告可以第一时间收到通知。</text>
		</view>
		
		<pageFooter></pageFooter>
		
		<image-modal
		  :show.sync="showModal" 
		  :imageUrl="qrcodeImage"
		  bgi="2"
		  @close="onModalClose"
		/>
		
	</view>
</template>

<script>
	import ImageModal from '@/components/image-modal.vue';
	import pageFooter from '@/components/pageFooter/index.vue';
	import { saveForm } from '@/api/report.js'
	
	export default {
		components: {
			pageFooter,
			ImageModal,
		},
		data() {
			return {
				formData: {
					sample: '',
					name: '',
					age: undefined,
					phone: ''
				},
				showModal:false,
				qrcodeImage:'https://sp.x-fmt.com//uploads/attach/2025/08/20250805/1909909c731c9c00bbc49519469157de.jpg',
			}
		},
		created(){
			
		},
		onLoad(options){
			console.log(options);
			this.formData.sample = options.sample;
		},
		methods: {
			handleSubmit() {
				// 这里处理提交逻辑
				console.log('表单提交:', this.formData);
				// 可以添加表单验证等逻辑
				saveForm(this.formData).then(res => {
					this.showModal = true;
					// #ifdef MP
					wx.requestSubscribeMessage({
					  tmplIds: ['qWHsgL5fu2qx1jNbsKb9E0k_5-OlgNQnEbpmKObYIIU'],
					  success(res) {
						console.log("订阅消息授权", res)
					  }
					})
					// #endif
				})
			},
			onModalClose(){
				uni.navigateTo({
					url: `/pages/report/index`
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 确保容器占满整个屏幕 */
	page,
	.container {
		max-width: 100%;
		max-height: 100%;
		background-color: #ffffff;
		overflow: hidden;
	}

	.container {
		display: flex;
		flex-direction: column;
		padding: 165rpx 85rpx;
		box-sizing: border-box;
	}

	/* 表单容器 */
	.form-container {
		flex: 1;
	}

	/* 表单项样式 - 改为左右布局 */
	.form-item {
		margin-bottom: 60rpx;
		position: relative;
		display: flex;
		align-items: center;
		padding-bottom: 20rpx;
	}

	.label {
		font-size: 40rpx;
		color: #333333;
		width: 160rpx;
		/* 固定标签宽度，保持对齐 */
		flex-shrink: 0;
		/* 防止标签被压缩 */
		display: inline-block;
		text-align: justify;
		text-align-last: justify; /* 确保最后一行也两端对齐 */
	}

	.input {
		font-size: 40rpx;
		/* 与标签字号一致 */
		height: 80rpx;
		flex: 1;
		padding-left: 30rpx;
		box-sizing: border-box;
	}

	.underline {
		height: 2rpx;
		width: 100%;
		background-color: rgb(229, 229, 229);
		position: absolute;
		bottom: 0;
		left: 0;
	}

	/* 提交按钮 */
	.submit-btn {
		width: 100%;
		// height: 90rpx;
		// line-height: 90rpx;
		text-align: center;
		// background-color: #07C160;
		// color: #ffffff;
		// font-size: 32rpx;
		// /* border-radius: 8rpx; */
		margin-top: 80rpx;
		margin-bottom: 0;
	}

	/* 底部提示 */
	.footer-tip {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #999999;
		margin-bottom: 20rpx;
	}

	.tip-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.tip-text {
		line-height: 30rpx;
	}

	 /* 居中按钮 */
	.container-but {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}

	/* 图片按钮容器 */
	.image-btn-container {
		width: 350rpx;
		/* 固定宽度 */
		height: auto;
		/* 高度自适应 */
	}

	/* 图片按钮样式 */
	.image-btn {
		width: 100%;
		/* 继承容器宽度 */
		height: auto;
		/* 高度自适应 */
		// border-radius: 16rpx; /* 圆角 */
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		transition: transform 0.2s;
		/* 点击动画 */
	}
</style>